<template>
  <div style="padding: 1rem">
    <!-- 上方菜单 -->
    <div class="main">
      <!-- 查询表单 -->
      <div>
        <ElForm :inline="true">
          <ElFormItem>
            <ElSelect v-model="queryInfo.orderBy">
              <ElOption v-for="d in orders" :value="d.value" :label="d.text"></ElOption>
            </ElSelect>
          </ElFormItem>
          <ElFormItem>
            <ElInput v-model="queryInfo.tname" placeholder="球队名称模糊查询"></ElInput>
          </ElFormItem>
          <ElFormItem>
            <ElInput v-model="queryInfo.league" placeholder="所属联赛模糊查询"></ElInput>
          </ElFormItem>

          <ElFormItem>
            <ElButtonGroup>
              <ElButton type="danger" @click="reset">重置</ElButton>
              <ElButton type="primary" @click="requey">查询</ElButton>
            </ElButtonGroup>
          </ElFormItem>
          <ElFormItem>
            <ElButton type="warning" @click="avisible = true">添加</ElButton>
          </ElFormItem>
        </ElForm>
      </div>
    </div>

    <!-- 数据呈现部分 -->
    <div>
      <ElTable :data="list" v-loading="loading">
        <ElTableColumn label="编号" prop="ftid"></ElTableColumn>
        <ElTableColumn label="球队名称">
          <template #default="scope">
            <a href="javascript:void(0)" @click="showDetail(scope.row)">{{ scope.row.tname }}</a>
          </template>
        </ElTableColumn>
        <ElTableColumn label="所属联赛" prop="league"></ElTableColumn>
        <ElTableColumn label="联赛冠军数量" prop="champions"></ElTableColumn>
        <ElTableColumn label="杯赛冠军数量" prop="cups"></ElTableColumn>
        <ElTableColumn label="粉丝数（万）" prop="fans"></ElTableColumn>
        <ElTableColumn label="进球数记录" prop="goals"></ElTableColumn>
        <ElTableColumn label="进球数记录保持者" prop="gname"></ElTableColumn>
        <ElTableColumn label="俱乐部创建时间">
          <template #default="scope">
            {{ Tools.formatDate(scope.row.created, 'yyyy-MM-dd') }}
          </template>
        </ElTableColumn>
        <ElTableColumn label="操作">
          <template #default="scope">
            <ElButton size="small" @click="del(scope.row)" type="danger">删除</ElButton>
            <ElButton size="small" @click="showModify(scope.row)" type="success">修改</ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
      <PageComp :page="page" @page-change="query"></PageComp>
    </div>
  </div>

  <!-- 修改对话框 -->
  <ElDialog v-model="mvisible" title="修改信息" @close="requey">
    <div>
      <ElForm v-loading="loading">
        <ElFormItem>
          <ElInput v-model="modifyInfo.tname" placeholder="球队名称"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElInput v-model="modifyInfo.league" placeholder="所属联赛"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElInput type="textarea" rows="7" v-model="modifyInfo.intro" placeholder="球队简介"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <div style="display: flex; justify-content: space-between; width: 100%">
            <ElInputNumber :min="0" v-model="modifyInfo.champions" placeholder="联赛冠军数量"></ElInputNumber>
            <ElInputNumber :min="0" v-model="modifyInfo.cups" placeholder="杯赛冠军数量"></ElInputNumber>
            <ElInputNumber :min="0" v-model="modifyInfo.fans" placeholder="粉丝数（万）"></ElInputNumber>
            <ElInputNumber :min="0" v-model="modifyInfo.goals" placeholder="进球数记录"></ElInputNumber>
          </div>
        </ElFormItem>
        <ElFormItem>
          <ElInput v-model="modifyInfo.gname" placeholder="进球数记录保持者"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElDatePicker v-model="modifyInfo.created" value-format="YYYY-MM-DD" type="date" placeholder="俱乐部创建时间" />
        </ElFormItem>
        <ElFormItem>
          <ElButton @click="modify" type="primary">保存</ElButton>
        </ElFormItem>
      </ElForm>
    </div>
  </ElDialog>

  <!-- 添加对话框 -->
  <ElDialog v-model="avisible" title="添加信息" @open="resetAdd" @close="requey">
    <div>
      <ElForm v-loading="loading">
        <ElFormItem>
          <ElInput v-model="addInfo.tname" placeholder="球队名称"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElInput v-model="addInfo.league" placeholder="所属联赛"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElInput type="textarea" rows="7" v-model="addInfo.intro" placeholder="球队简介"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <div style="display: flex; justify-content: space-between; width: 100%">
            <ElInputNumber :min="0" v-model="addInfo.champions" placeholder="联赛冠军数量"></ElInputNumber>
            <ElInputNumber :min="0" v-model="addInfo.cups" placeholder="杯赛冠军数量"></ElInputNumber>
            <ElInputNumber :min="0" v-model="addInfo.fans" placeholder="粉丝数（万）"></ElInputNumber>
            <ElInputNumber :min="0" v-model="addInfo.goals" placeholder="进球数记录"></ElInputNumber>
          </div>
        </ElFormItem>
        <ElFormItem>
          <ElInput v-model="addInfo.gname" placeholder="进球数记录保持者"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElDatePicker v-model="addInfo.created" value-format="YYYY-MM-DD" type="date" placeholder="俱乐部创建时间" />
        </ElFormItem>
        <ElFormItem>
          <ElButton @click="resetAdd" type="danger">重置</ElButton>
          <ElButton @click="add" type="primary">添加</ElButton>
        </ElFormItem>
      </ElForm>
    </div>
  </ElDialog>

  <!-- 内容查看对话框 -->
  <ElDialog v-model="dvisible" :title="detailInfo.tname">
    <div class="detail">
      {{ detailInfo.intro }}
    </div>
  </ElDialog>
</template>
<script setup lang="ts">
//#region  基础导入和变量
// vue核心
import { ref } from 'vue'
// 饿了么组件
import { ElInputNumber, ElMessage, ElMessageBox, ElButtonGroup, ElDialog, ElButton, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElTable, ElTableColumn, ElDatePicker } from 'element-plus'

import { BaseDataResult, BasePageVO, BaseResult, PageBean } from '../../ts/types/BaseResult'
import { TbFootballTeam } from '../../ts/types/CRUD'
import { ApiService } from '../../ts/ApiService'
import Tools from '../../ts/Tools'
import PageComp from '../../components/PageComp.vue'

const loading = ref(false)
//#endregion

//#region 删除

const del = (info: TbFootballTeam) => {
  ElMessageBox.confirm(`是否删除：${info.tname}`).then(() => {
    loading.value = true
    ApiService.delete(`/crud/footballteam/${info.ftid}`, {}, (data: BaseResult) => {
      loading.value = false
      data.success ? ElMessage.success(data.message) : ElMessage.error(data.message)
      requey()
    })
  })
}

//#endregion

//#region 修改
const modifyInfo = ref({} as TbFootballTeam)
const mvisible = ref(false)

const showModify = (info: TbFootballTeam) => {
  loading.value = true
  ApiService.get(`/crud/footballteam/${info.ftid}`, {}, (data: BaseDataResult<TbFootballTeam>) => {
    loading.value = false
    if (data.success) {
      modifyInfo.value = data.data
      mvisible.value = true
    } else {
      ElMessage.error(data.message)
    }
  })
}

const modify = () => {
  loading.value = true
  ApiService.put('/crud/footballteam', modifyInfo.value, (data: BaseResult) => {
    loading.value = false
    data.success ? ElMessage.success(data.message) : ElMessage.error(data.message)
  })
}

//#endregion

//#region 添加
const addInfo = ref({} as TbFootballTeam)
const avisible = ref(false)

const resetAdd = () => {
  addInfo.value = {} as TbFootballTeam
}

const add = () => {
  loading.value = true
  ApiService.post('/crud/footballteam', addInfo.value, (data: BaseResult) => {
    loading.value = false
    data.success ? ElMessage.success(data.message) : ElMessage.error(data.message)
  })
}

//#endregion

//#region 查询
const page = ref({ pageSize: 10, pageNumber: 1 } as PageBean)

const orders = [
  { value: 1, text: '粉丝数' },
  { value: 2, text: '联赛冠军数' },
  { value: 3, text: '杯赛冠军数' },
  { value: 4, text: '俱乐部创建时间' },
]

const queryInfo = ref({
  tname: '',
  league: '',
  orderBy: 1,
})

const list = ref([] as Array<TbFootballTeam>)

const reset = () => {
  queryInfo.value = {
    tname: '',
    league: '',
    orderBy: 1,
  }
  requey()
}

const requey = () => {
  page.value.pageNumber = 1
  query()
}

const query = () => {
  loading.value = true
  ApiService.get('/crud/footballteam', Tools.concatJson(queryInfo.value, page.value), (data: BaseDataResult<BasePageVO<Array<TbFootballTeam>>>) => {
    loading.value = false
    if (data.success) {
      page.value = data.data.pageBean
      list.value = data.data.data
    } else {
      ElMessage.error(data.message)
    }
  })
}

const detailInfo = ref({} as TbFootballTeam)
const dvisible = ref(false)

const showDetail = (info: TbFootballTeam) => {
  loading.value = true
  ApiService.get(`/crud/footballteam/${info.ftid}`, {}, (data: BaseDataResult<TbFootballTeam>) => {
    loading.value = false
    if (data.success) {
      detailInfo.value = data.data
      dvisible.value = true
    } else {
      ElMessage.error(data.message)
    }
  })
}

query()
//#endregion
</script>
<style scoped lang="scss">
.main {
  display: flex;
  justify-content: flex-end;
}

.detail {
  line-break: anywhere;
  word-break: break-all;
  max-width: 100%;
  max-height: 50vh;
  overflow-y: auto;
}
</style>
